<template>
  <u-popup
    :show="showContactPopup"
    mode="bottom"
    :closeable="false"
    closeOnClickOverlay
    bgColor="transparent"
    @close="handleClose"
  >
    <view class="contact-popup">
      <!-- 电话号码区域 -->
      <view class="phone-section" @click="handleCall">
        <view class="phone-number">{{ phoneNumber }}</view>
        <view class="service-time">客服在线时间 {{ serviceTime }}</view>
      </view>

      <!-- 底部按钮 -->
      <view class="action-buttons">
        <button
          class="action-btn cancel-btn"
          type="default"
          size="medium"
          @click="handleCancel"
        >
          取消
        </button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "ContactPopup",

  props: {
    // 控制弹窗显示
    value: {
      type: Boolean,
      default: false,
    },
    // 电话号码
    phone: {
      type: String,
      default: "400-9960-297",
    },
    // 服务时间
    serviceTime: {
      type: String,
      default: "08:00-22:00",
    },
    // 弹窗标题
    title: {
      type: String,
      default: "联系我们",
    },
    // 副标题
    subtitle: {
      type: String,
      default: "客服热线",
    },
  },

  data() {
    return {
      showContactPopup: false,
    };
  },

  computed: {
    // 格式化电话号码显示
    phoneNumber() {
      return this.phone;
    },
  },

  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.showContactPopup = newVal;
      },
    },

    showContactPopup(newVal) {
      this.$emit("input", newVal);
    },
  },

  methods: {
    // 拨打电话
    handleCall() {
      // 提取纯数字电话号码
      const cleanPhone = this.phone.replace(/\D/g, "");

      // 在小程序中调用拨打电话功能
      uni.makePhoneCall({
        phoneNumber: cleanPhone,
        success: () => {
          console.log("拨打电话成功");
          this.$emit("call-success", cleanPhone);
        },
        fail: (error) => {
          console.error("拨打电话失败:", error);
          this.$emit("call-error", error);
        },
      });

      // 关闭弹窗
      this.handleClose();
    },

    // 取消操作
    handleCancel() {
      this.handleClose();
      this.$emit("cancel");
    },
    handleClose() {
      this.showContactPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.contact-popup {
  padding: 20rpx 32rpx;
  .phone-section {
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .phone-number {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      text-align: center;
    }

    .service-time {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      text-align: center;
    }
  }

  .action-buttons {
    display: flex;
    gap: 20rpx;

    .action-btn {
      width: 100%;
      height: 82rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      text-align: center;
    }
  }
}
</style>
